<template>
  <view>
    <app-header title="首页">
      <uv-icon name="bell" size="22" color="#fff" @click="navigateToNotifications"></uv-icon>
      <!-- 牲畜报道 -->
      <view class="csbd">
        <view class="textcs">牲畜报道</view>
        <view class="colck">
          <uv-icon name="clock" size="18" color="#999999"></uv-icon>
          <text class="colcktext">00:00 ~ 15:30</text>
        </view>
        <view class="box">
          <view v-for="(item, index) in data" :key="index">
            <BoxItem :item="item" />
          </view>
        </view>
      </view>
    </app-header>
    
    <!-- 设备统计组件 -->
    <DeviceStats 
      :devices="deviceStats" 
      class="sb"
    />

    <!-- 温湿度组件 -->
    <view class="air-stats yp">
      <view class="yptitle">养殖棚环境监控</view>
      
      <!-- 选项卡 -->
      <uv-tabs
        ref="tabsRef"
        :list="list"
        :activeStyle="{ color: '#0ccb75' }"
        :inactiveStyle="{ color: '#686868' }"
        :scrollable="false"
        :lineColor="'#0ccb75'"
        :lineWidth="0"
        @click="handleTabClick"
      ></uv-tabs>

      <!-- 环境数据展示 -->
      <view class="air">
        <!-- 循环渲染子组件 -->
        <view v-for="(item, index) in airStatsData" :key="index">
          <AirStats :item="item"></AirStats>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import AppHeader from '@/components/AppHeader/AppHeader.vue';
  import uvIcon from '@/uni_modules/uv-icon/components/uv-icon/uv-icon.vue';
  import BoxItem from '@/components/homeson/BoxItem.vue';
  import DeviceStats from '@/components/homeson/DeviceStats.vue';
  import AirStats from '@/components/homeson/AirStats.vue'; // 引入子组件
  import '@/static/fonts/iconfont.css'
  import { getHomeData, getHouse, getSetting } from '@/api/home'; // 引入接口
  import { ref, onMounted, computed } from 'vue';

  // 页面数据
  const data = ref([
    { number: 62, title: '应到' },
    { number: 61, title: '已到' },
    { number: 1, title: '未到' }
  ]);

  // 设备统计数据
  const deviceStats = ref([
    { type: '异常设备', count: 34, iconClass: 'custom-icon-tixingshixin', iconColor: '#ffb21a' },
    { type: '监控设备', count: 34, imgSrc: '/static/imgs/shexiang.png' }
  ]);

  // 养殖棚列表数据
  const list = ref([
    { name: '养殖棚一号' },
    { name: '养殖棚二号' }
  ]);
  
  // 当前活跃的选项卡索引
  const activeIndex = ref(0);
  
  // 选中的养殖棚信息
  const selectedSetting = ref({
  });

  // 子组件数据
  const airStatsData = ref([
    { title: '空气温度', value: selectedSetting.value.F_Temp, unit: '℃', createTime: selectedSetting.value.F_CreateTime, pustTime: selectedSetting.value.F_PustTime },
    { title: '空气湿度', value: selectedSetting.value.F_Humidity, unit: '%RH', createTime: selectedSetting.value.F_CreateTime, pustTime: selectedSetting.value.F_PustTime },
    { title: '硫化氢', value: selectedSetting.value.F_Pm, unit: 'mg/m³', createTime: selectedSetting.value.F_CreateTime, pustTime: selectedSetting.value.F_PustTime },
    { title: '甲烷', value: selectedSetting.value.F_Ch, unit: 'mg/m³', createTime: selectedSetting.value.F_CreateTime, pustTime: selectedSetting.value.F_PustTime },
    { title: '氨气', value: selectedSetting.value.F_Ammonia, unit: 'mg/m³', createTime: selectedSetting.value.F_CreateTime, pustTime: selectedSetting.value.F_PustTime },
    { title: '二氧化碳', value: selectedSetting.value.F_Carbon, unit: 'ppm', createTime: selectedSetting.value.F_CreateTime, pustTime: selectedSetting.value.F_PustTime },
    { title: '光照', value: selectedSetting.value.F_Illumination, unit: 'lux', createTime: selectedSetting.value.F_CreateTime, pustTime: selectedSetting.value.F_PustTime }
  ]);

  // 选项卡点击事件处理
  const handleTabClick = async (event) => {
    const index = event.index;
    activeIndex.value = index; // 更新当前活跃选项卡索引
    console.log('选项卡点击事件触发，索引:', index);
  
    // 获取选中的养殖棚信息
    console.log("养殖棚列表：", list.value); // 调试：打印养殖棚列表
    const selectedHouseId = list.value[index].id;
    
    // 存储选中的养殖棚ID到Storage
    uni.setStorageSync('selectedHouseId', selectedHouseId);
    console.log('存储到Storage的养殖棚ID:', selectedHouseId);
    
    // 获取选中的养殖棚信息
    try {
      const res = await getSetting({ F_HouseId: selectedHouseId });
      console.log("getSetting接口返回数据：", res); // 调试：打印接口返回数据
      if (res.code === 200 && res.data && res.data.length > 0) {
        console.log('选中的养殖棚信息:', res.data[0]);
        selectedSetting.value = res.data[0];
        // 更新子组件数据
        airStatsData.value = [
          { title: '空气温度', value: res.data[0].F_Temp, unit: '℃', createTime: res.data[0].F_CreateTime, pustTime: res.data[0].F_PustTime },
          { title: '空气湿度', value: res.data[0].F_Humidity, unit: '%RH', createTime: res.data[0].F_CreateTime, pustTime: res.data[0].F_PustTime },
          { title: '硫化氢', value: res.data[0].F_Pm, unit: 'mg/m³', createTime: res.data[0].F_CreateTime, pustTime: res.data[0].F_PustTime },
          { title: '甲烷', value: res.data[0].F_Ch, unit: 'mg/m³', createTime: res.data[0].F_CreateTime, pustTime: res.data[0].F_PustTime },
          { title: '氨气', value: res.data[0].F_Ammonia, unit: 'mg/m³', createTime: res.data[0].F_CreateTime, pustTime: res.data[0].F_PustTime },
          { title: '二氧化碳', value: res.data[0].F_Carbon, unit: 'ppm', createTime: res.data[0].F_CreateTime, pustTime: res.data[0].F_PustTime },
          { title: '光照', value: res.data[0].F_Illumination, unit: 'lux', createTime: res.data[0].F_CreateTime, pustTime: res.data[0].F_PustTime }
        ];
      } else {
        // 如果接口返回无数据，重置 selectedSetting 或显示提示
        selectedSetting.value = {
          F_Temp: '--',
          F_Humidity: '--',
          F_Pm: '--',
          F_Ch: '--',
          F_Ammonia: '--',
          F_Carbon: '--',
          F_Illumination: '--',
          F_PustTime: '',
          F_CreateTime: ''
        };
        airStatsData.value = [
          { title: '空气温度', value: '--', unit: '℃', createTime: '', pustTime: '' },
          { title: '空气湿度', value: '--', unit: '%RH', createTime: '', pustTime: '' },
          { title: '硫化氢', value: '--', unit: 'mg/m³', createTime: '', pustTime: '' },
          { title: '甲烷', value: '--', unit: 'mg/m³', createTime: '', pustTime: '' },
          { title: '氨气', value: '--', unit: 'mg/m³', createTime: '', pustTime: '' },
          { title: '二氧化碳', value: '--', unit: 'ppm', createTime: '', pustTime: '' },
          { title: '光照', value: '--', unit: 'lux', createTime: '', pustTime: '' }
        ];
        console.warn('当前养殖棚无数据');
        // 可以在这里添加提示用户的功能，例如使用 uni.showToast
        uni.showToast({
          title: '当前养殖棚无数据',
          icon: 'none',
          duration: 2000
        });
      }
    } catch (error) {
      console.error('获取养殖棚信息失败:', error);
      // 处理错误情况
      uni.showToast({
        title: '获取数据失败',
        icon: 'none',
        duration: 2000
      });
    }
  };

  // 获取养殖棚列表
  const fetchHouseData = async () => {
    try {
      const res = await getHouse(); // 调用接口获取养殖棚列表
      console.log("养殖棚列表返回数据：", res);
      if (res.code === 200) {
        // 确保每个养殖棚对象都有 name 和 id 字段
        list.value = res.data.map(item => ({
          name: item.F_Title,
          id: item.F_Id // 确保这里正确获取了养殖棚的 ID
        }));
        console.log("养殖棚列表初始化：", list.value);
      }
    } catch (error) {
      console.error("获取养殖棚列表失败：", error);
    }
  };

  // 获取默认养殖棚的信息
  const fetchDefaultSetting = async (houseId) => {
    try {
      const res = await getSetting({ F_HouseId: houseId });
	  console.log(res);
      if (res.code === 200) {
        console.log('默认养殖棚信息:', res.data[0]);
        selectedSetting.value = res.data[0];
        // 更新子组件数据
        airStatsData.value = [
          { title: '空气温度', value: res.data[0].F_Temp, unit: '℃', createTime: res.data[0].F_CreateTime, pustTime: res.data[0].F_PustTime },
          { title: '空气湿度', value: res.data[0].F_Humidity, unit: '%RH', createTime: res.data[0].F_CreateTime, pustTime: res.data[0].F_PustTime },
          { title: '硫化氢', value: res.data[0].F_Pm, unit: 'mg/m³', createTime: res.data[0].F_CreateTime, pustTime: res.data[0].F_PustTime },
          { title: '甲烷', value: res.data[0].F_Ch, unit: 'mg/m³', createTime: res.data[0].F_CreateTime, pustTime: res.data[0].F_PustTime },
          { title: '氨气', value: res.data[0].F_Ammonia, unit: 'mg/m³', createTime: res.data[0].F_CreateTime, pustTime: res.data[0].F_PustTime },
          { title: '二氧化碳', value: res.data[0].F_Carbon, unit: 'ppm', createTime: res.data[0].F_CreateTime, pustTime: res.data[0].F_PustTime },
          { title: '光照', value: res.data[0].F_Illumination, unit: 'lux', createTime: res.data[0].F_CreateTime, pustTime: res.data[0].F_PustTime }
        ];
      }
    } catch (error) {
      console.error('获取默认养殖棚信息失败:', error);
    }
  };

  // 获取首页数据
  const fetchHomeData = async () => {
    try {
      const res = await getHomeData(); // 调用接口
      console.log("首页返回数据：", res); // 打印数据
      if (res.code === 200) {
        const { 
          warning_count, 
          allCattle_count, 
          present_cattle_count, 
          offline_count, 
          eartag_count, 
          video_count
        } = res.data;
        
        // 更新页面数据
        data.value = [
          { number: allCattle_count, title: '应到' },
          { number: present_cattle_count, title: '已到' },
          { number: allCattle_count - present_cattle_count, title: '未到' }
        ];

        // 更新设备统计数据
        deviceStats.value = [
          { type: '异常设备', count: offline_count + eartag_count, iconClass: 'custom-icon-tixingshixin', iconColor: '#ffb21a' },
          { type: '监控设备', count: video_count, imgSrc: '/static/imgs/shexiang.png' }
        ];
      }
    } catch (error) {
      console.error("接口请求失败：", error); // 打印错误
    }
  };

  // 格式化时间
  const formatTime = (timeString) => {
    if (!timeString) return '--:--'; // 如果时间字符串为空，返回默认值
  
    const date = new Date(timeString);
    if (isNaN(date.getTime())) return '--:--'; // 如果日期无效，返回默认值
  
    return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
  };

  // 页面加载时调用接口
  onMounted(async () => {
    await fetchHomeData();
    await fetchHouseData();
	
	// 默认获取第一个养殖棚的信息
	  if (list.value && list.value.length > 0) {
	    const defaultHouseId = list.value[0].id;
	    uni.setStorageSync('selectedHouseId', defaultHouseId);
	    console.log('默认存储到Storage的养殖棚ID:', defaultHouseId);
	
	    // 获取默认养殖棚信息
	    fetchDefaultSetting(defaultHouseId);
	  }
  });
  
  const navigateToNotifications = () => {
    uni.navigateTo({
      url: '/pages/home/notifications'
    });
  };
</script>

<style scoped lang="scss">
.csbd {
  width: 690rpx;
  height: 360rpx;
  background-color: white;
  position: absolute;
  top:88rpx;
  left:-10rpx;
  border-radius: 20rpx;
  box-shadow: 0 30rpx 8rpx rgba(0, 0, 0, 0.1);
  .textcs {
    position: absolute;
    color: #0bcb75;
    top: 38rpx;
    left: 284rpx;
  }
}
.colck {
  color: #999;
  display: flex;
  margin-left: 226rpx;
  margin-top: 94rpx;
  .colcktext {
    margin-left: 12rpx;
  }
}
.box {
  width: 690rpx;
  height: 138rpx;
  margin-top: 52rpx;
  display: flex;
}
.sb {
  width: 750rpx;
  height: 290rpx;
  background-color: #f7f8f9;
  padding-top: 100rpx;
}
.yp {
  width: 750rpx;
  height: 528rpx;
  :deep(.uv-tabs) {
    margin: 20rpx 0;
  }
  .yptitle {
    width: 750rpx;
    height: 70rpx;
    padding-left: 30rpx;
    padding-top: 22rpx;
    font-weight: 600;
    border: 1rpx solid #f2f2f2;
  }
}

.air-stats {
	width: 750rpx;
	height: 528rpx;
}

.air {
	width: 750rpx;
	display: flex;
	flex-wrap: wrap; /* 允许换行 */
}
</style>